<template>
	<view class="wrap">
		<view class="name">选择规格</view>
		<view class="class">
			<view class="title">保修时间</view>
			<view class="list">
				<view class="item" @click="changeFee(el, '1')" :class="el.id === formName.serviceTimeId ? 'actives' : ''" v-for="el in serviceList" :key="el.id">{{ el.name }}</view>
			</view>
		</view>
		<view class="class">
			<view class="title">服务等级</view>
			<view class="list">
				<view class="item" @click="changeFee(el, '2')" :class="el.id === formName.lvId ? 'actives' : ''" v-for="el in levelList" :key="el.id">{{ el.name }}</view>
			</view>
		</view>
		<view class="price">
			<view class="title">预估费用</view>
			<view class="number">
				￥
				<span>{{ form.total }}</span>
			</view>
		</view>
		<div class="submit">
			<u-button shape="circle" type="success" color="#21B579" @click="submit">提交订单</u-button>
		</div>
	</view>
</template>

<script>
export default {
	data() {
		return {
			serviceList: [],
			levelList: [],
			form: {
				serviceTimeFees: [],
				lvFee: '',
				total: ''
			},
			formName: {
				serviceTimeId: [],
				lvId: '',
				serviceTimeName: '',
				lvName: ''
			}
		};
	},
	methods: {
		// 获取服务列表
		getServiceItems({ specsList, serviceParams }) {
			// console.log('111');
			// console.log(specsList, serviceParams);

			this.serviceList = specsList.serviceTime;
			this.levelList = specsList.lvs;

			this.formName = {
				serviceTimeId: serviceParams.serviceTimeId,
				lvId: serviceParams.lvId,
				serviceTimeName: serviceParams.serviceTimeName,
				lvName: serviceParams.lvName
			};
			this.form = {
				serviceTimeFees: serviceParams.serviceTimeFees,
				lvFee: serviceParams.lvFee,
				total: serviceParams.total
			};
		},
		// 提交订单
		submit() {
			this.$emit('submitSpecs', { ...this.form, ...this.formName });
		},
		// 修改服务 修改等级
		changeFee(e, type) {
			console.log(e, type, type === '2');
			if (type === '2') {
				this.formName.lvId = e.id;
				this.formName.lvName = e.name;
				this.form.lvFee = e.fee;
			} else {
				this.formName.serviceTimeId = e.id;
				this.formName.serviceTimeName = e.name;
				this.form.serviceTimeFees = e.fee;
			}

			// console.log(itemPrice);
			this.form.total = this.form.serviceTimeFees * this.form.lvFee;
			this.$emit('changeSpecs', { ...this.form, ...this.formName });
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	padding: 20rpx 32rpx;
	.name {
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		padding: 32rpx 0;
		font-weight: 500;
	}
	.class {
		// padding: 20rpx 32rpx;
		margin-top: 30rpx;
		.title {
			font-weight: 500;
			color: #333333;
			height: 44rpx;
			margin-bottom: 24rpx;
			font-size: 28rpx;
		}
		.list {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;
			// gap:24rpx;

			.item {
				color: #333333;
				line-height: 60rpx;
				font-size: 26rpx;
				height: 60rpx;
				padding: 0 30rpx;
				font-size: 26rpx;
				background-color: #f8f9fa;
				border-radius: 30rpx;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
			}
			.active {
				background-color: #21b579;
			}
			.actives {
				background-color: #21b579;
				color: #fff;
			}
		}
	}
	.price {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 82rpx;
		.title {
			font-weight: 500;
			color: #333333;
			height: 44rpx;
			margin-bottom: 24rpx;
			font-size: 28rpx;
		}
		.number {
			font-size: 22rpx;
			color: #f55726;
			span {
				font-size: 42rpx;
				font-weight: bold;
			}
		}
	}
	.submit {
		margin: 62rpx 0;
	}
}
</style>
